<template>
	<view>
		<div class="healthCardRegistration">
			<div class="title" @click="comeBack()">
				<image src="../../static/icon_arrow_blue_left.png"></image>
				注册健康卡
			</div>
			<div class="prompt">
				<image src="../../static/hint.png"></image>
				注册成功即可直接刷身份证挂号， 缴费，查询报告
			</div>
			<div class="form">
				<div class="formList uni-form-item uni-column">
					<div class="title">身份证：</div>
					<div><input :placeholder="idNumber" disabled type="text" v-model="idNumber"></div>
				</div>
				<div class="formList uni-form-item uni-column">
					<div class="title">姓名：</div>
					<div><input placeholder="请输入姓名" type="text" v-model="realName"></div>
				</div>

				<div class="formList uni-form-item uni-column">
					<div class="title">民族：</div>
					<div><input placeholder="请输入民族" type="text" v-model="nation"></div>
				</div>
				<!-- <div class="formList uni-form-item uni-column">
					<div class="title">性别：</div>
					<div><input placeholder="请输入性别" disabled type="text"  v-model="sex"></div>
				</div>
				<div class="formList uni-form-item uni-column">
					<div class="title">出生日期：</div>
					<div><input placeholder="请输入生日" disabled type="text"  v-model="birthday"></div>
				</div> -->
				<div class="formList uni-form-item uni-column">
					<div class="title">性别：</div>
					<div>
						<radio-group @change="radioChange">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in sexData"
								:key="item.value">
								<radio :value="item.value" :checked="item.checked" /><span>{{item.name}}</span>
							</label>
						</radio-group>
					</div>
				</div>

				<div class="formList uni-form-item uni-column">
					<div class="title">出生日期：</div>
					<div class="">
						<picker mode="date" :value="birthday" :start="startDate" :end="endDate"
							@change="bindDateChange">
							<view>{{birthday}}</view>
						</picker>
					</div>
				</div>
				<!-- 	<div class="formList uni-form-item uni-column">
					<div class="title">省/市/县(区)：</div>
					<uni-data-picker placeholder="请选择省/市/县(区)" popup-title="请选择省/市/县(区)" :localdata="cityData"
						field="code as value, name as text" orderby="value asc" :step-searh="true" self-field="code"
						parent-field="parent_code" @change="onchange">
					</uni-data-picker>
				</div> -->
				<div class="formList uni-form-item uni-column">
					<div class="title">详细地址：</div>
					<div><input placeholder="请输入详细地址" type="text" v-model="address"></div>
				</div>

				<div class="formList uni-form-item uni-column">
					<div class="title">手机号：</div>
					<div><input placeholder="请输入手机号" type="tel" v-model="mobile"></div>
				</div>

				<div class="submit ">
					<button type="primary" @click="submit()">提交</button>
				</div>
			</div>
		</div>
	</view>
</template>

<script lang="ts">
	// import cityData from '../../static/city-china.json';
	import { uiCollection } from '../../Providing/uiCollection';
	import { AddHealthyCard, request } from '../../Providing/request'
	import { globalVariable } from '../../globalVariable/globalVariable';

	export default {
		data() {
			return {
				idNumber: globalVariable.iDCard, //身份证号
				birthday: globalVariable.birthDay==''? this.getDate({format: true}):globalVariable.birthDay, //出生年月日
				realName: globalVariable.peopleName, //姓名
				mobile: "",//手机号
				sex: globalVariable.sex == '' ? globalVariable.sex : '男', //性别1 男 2 女
				nation: globalVariable.people,//民族
				// province: "",//省份
				// city: "",//市
				// area: "",//区
				address: globalVariable.addr,//详细地址

				// date: ,
				// cityData,

				sexData: [{
					value: '1',
					name: '男',
					checked: 'true'

				},
				{
					value: '2',
					name: '女'
				},]

			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			comeBack() {
				uni.$emit('goToHome');
			},
			bindDateChange(e) {
				console.log(e.detail.value)
				this.birthday=e.detail.value;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 150;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			radioChange(event : any) {
				this.sexData.forEach(item => {
					if (item.value === event.detail.value) {
						this.sex = item.name
					}
				})
			},


			submit() {
				if (this.idNumber == "")
					return uiCollection.showModal("身份证号不能为空");
				if (this.birthday == "")
					return uiCollection.showModal("出生年月日不能为空");
				if (this.realName == "")
					return uiCollection.showModal("姓名不能为空");
				if (this.mobile == "")
					return uiCollection.showModal("手机号不能为空");
				if (this.sex == "")
					return uiCollection.showModal("性别选择异常");
				if (this.nation == "")
					return uiCollection.showModal("民族不能为空");
				// if (this.province == "")
				// 	return uiCollection.showModal("省份不能为空");
				// if (this.city == "")
				// 	return uiCollection.showModal("市区不能为空");
				// if (this.area == "")
				// 	return uiCollection.showModal("区（县）不能为空");
				if (this.address == "")
					return uiCollection.showModal("详细地址不能为空");

				let addHealthyCard = new AddHealthyCard();
				addHealthyCard.address = this.address;
				// addHealthyCard.area=this.area;
				addHealthyCard.birthday = this.birthday;
				// addHealthyCard.city=this.city;
				addHealthyCard.idNumber = this.idNumber;
				addHealthyCard.mobile = this.mobile;
				addHealthyCard.nation = this.nation;
				// addHealthyCard.province=this.province;
				addHealthyCard.realName = this.realName;
				if (this.sex == "男") {
					addHealthyCard.sex = 1
				} else if (this.sex == "女") {
					addHealthyCard.sex = 2
				}

				uiCollection.showLoading("健康卡注册中，请稍后...");
				new request().postAddHealthyCard(addHealthyCard).then((res) => {
					uiCollection.hideLoading();
					uiCollection.showToast('健康卡注册成功');
					// uni.navigateBack();
					uni.$emit('goToHome');

				}).catch((err) => {
					uiCollection.hideLoading();
					uiCollection.showToast(err);

					console.log(err);
				})



			}
		},
	}
</script>

<style lang="scss">
	.healthCardRegistration {
		background-size: 100% 100%;
		height: 830px;
	}

	.prompt {
		margin: auto;
		width: 80%;
		font-size: 18px;
		line-height: 40px;

		image {
			width: 30px;
			height: 30px;
			vertical-align: middle;
		}
	}

	.form {
		width: 80%;
		margin: auto;


		.formList {
			max-width: 100%;
			border-bottom: 1px solid #999999;
			// border-radius: 10px;
			margin-top: 10px;
			padding: 10px;
			display: flex;
			font-size: 20px;
			// height: 50px;
			line-height: 50px;
			background-color: #fff;
			flex-wrap: wrap;

			.title {
				// 	min-width: 130px;
			}

			.uni-data-tree {
				min-width: 180px;
			}

			uni-input {
				height: 50px;
				line-height: 50px;
				width: 400px;
			}
		}
	}

	.submit {
		margin-top: 20px;
		height: 60px;
		line-height: 60px;
		font-size: 20px;

	}
</style>